<template>
  <div class="wt">
    <div class="timeC">
      <p class="date">
        {{ timeY }}
      </p>
      <p class="time">
        &nbsp;{{ timeH }}&nbsp;
      </p>
      <p class="date">
        {{ weekDay }}
      </p>
    </div>
    <div class="weatherClass">
      <div class="location"></div>
      <!-- <span>{{ weather.city }}</span> -->
      <span>&nbsp;{{ weather.temperature }}&nbsp;</span>
      <span>{{ weather.weather }}</span>
    </div>
  </div>
</template>
<script setup>
import apis from '@/api/indexapi.js';
import {
  onMounted,
  onUnmounted,
  nextTick,
  ref,
  defineEmits,
  defineExpose,
  defineProps
} from "vue";

const weather = ref({
  city: '',
  temperature: '',
  weather: ''
});
//请求的实例
const _api = apis();
const getWeatherInfo = () => {
  let url = 'https://restapi.amap.com/v3/weather/weatherInfo'
  let dat = {
    city: 330200,  // 宁波市的城市编码
    extensions: 'base',
    key: 'a0eebf3a76b2e0681a62637a4794cc07',
  }
  _api.hDoGet(url, dat, '', b => {
    weather.value.city = b.lives[0].province + "省" + " " + b.lives[0].city
    weather.value.temperature = b.lives[0].temperature + "°C";
    weather.value.weather = b.lives[0].weather + "天";
  })
}
const timeY = ref('');
const timeH = ref('');
const weekDay = ref('');
const hRefTime = () => {
  var oDate = new Date(),
    year = oDate.getFullYear(),
    month = oDate.getMonth() + 1,
    day = oDate.getDate(),
    hour = oDate.getHours(),
    minutes = oDate.getMinutes(),
    seconds = oDate.getSeconds(),
    weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  String(minutes).length == 1 ? (minutes = '0' + minutes) : minutes;
  String(seconds).length == 1 ? (seconds = '0' + seconds) : seconds;
  timeY.value = year + '年' + month + '月' + day + '日';
  timeH.value = hour + ':' + minutes + ':' + seconds;
  weekDay.value = weekDays[oDate.getDay()];
};

const emit = defineEmits(['onFn', 'onUnSave']);
const hOnFn = (t) => {
  emit('onFn', t);
};

const hFn = () => { };

defineExpose({
  hFn
});

const props = defineProps({
  dat: {
    type: Object
  }
});

onMounted(() => nextTick(() => {
  getWeatherInfo();
  // getWeather();
  setInterval(() => {
    hRefTime();
  }, 500);
}));

onUnmounted(() => { });
</script>

<style scoped lang="scss">
.wt {
  width: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: fixed;
}

.timeC {
  width: auto;
  display: flex;
  // margin-right: 60px;
  flex-direction: row;
  align-items: center;

  .date,
  .time {
    // margin-top: 57px;


height: 36px;
font-family: Adobe Heiti Std;
font-weight: normal;
font-size: 17px;
color: #383737;
line-height: 39px;

  }
}

.weatherClass {
  position: fixed;
  right: 320px;
  // margin-top: 57px;
  // margin-left: 45px;
  width: auto;
  display: flex;
  justify-content: space-evenly;

height: 17px;
font-family: Adobe Heiti Std;
font-weight: normal;
font-size: 20px;
color: #010101;
line-height: 19px;

  // .location {
  //   margin-right: 16px;
  //   width: 14px;
  //   height: 21px;
  //   background: url(/imgs/hf/位置.png);
  //   background-size: 100% 100%;
  // }
}
</style>